<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>唯品会</title>
  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
    }

    /*头部*/
    .tou {
      height: 100px;
      background-image: url(../tu/toubu.png);
      background-size: 100% 100px;
      background-repeat: no-repeat;

    }

    /*背景*/
    .beijing {
      height: 650px;
      background-image: url(../tu/beijing.png);
      background-repeat: no-repeat;
      background-size: 100% 650px;


    }

    .zhuce_ {
      width: 1103px;
      height: 650px;
      /* background-color: red; */
      margin: auto;
      position: relative;
    }

    /*注册页面*/
    .zhuce {
      height: 550px;
      width: 350px;
      position: absolute;
      left: 642px;
      top: 50px;
      background-color: #ffffff;
    }

    .huiyuan {
      height: 25px;
      width: 350px;
      margin: 15px 0px 0 30px;
    }

    /*huiyuan类的span样式*/
    .huiyuan span {
      font-size: 18px;
      font-weight: bold;
      float: left
    }

    /*让div靠右，控制已注册可直接登录*/
    .zou {
      height: 25px;
      width: 150px;
      float: right;
      font-size: 13px;
      color: #666666;
      margin: 3px 25px 0 0;
    }

    /*zhuce类input的样式*/
    .zhuce input {
      height: 40px;
      width: 260px;
      border: 1px solid #cccccc;
      padding-left: 30px;
      margin: 25px 0px 0px 28px;
    }

    .box {
      color: red;
      font-size: 14px;
      margin-left: 28px;
      /* background-color: pink; */

    }

    /*验证码文本框*/
    .zhuce .yanzengma-1 {
      width: 135px;
      margin-top: 5px;
    }

    /*获取验证码*/
    .zhuce .yanzengma-2 {
      width: 110px;
      margin-top: 5px;
      margin-left: 10px;
      background-color: #cccccc;
      color: #999999;
      text-align: center;
      padding: 0;
    }

    /*立即注册的样设*/
    .zhuce .tijiao {
      width: 293px;
      height: 40px;
      background: #f10180;
      color: white;
      border: 1px solid #f10180;
      text-align: center;
      margin-top: 10px;
      margin-left: -15px;
    }

    /*复选框的大小*/
    .zhuce input[type="checkbox"] {
      height: 15px;
      width: 15px;
    }

    /*复选框*/
    .zhuce .fu {
      height: 80px;
      width: 50px;
      float: left;
    }

    /*复选框右边的字*/
    .zhuce .zi {
      height: 50px;
      width: 250px;
      float: left;
      margin-top: 23px;
      font-size: 14px;
    }

    /*-----------------超链接--------------------*/

    /*.zi内我已阅读并接受以下条款......
  字体颜色
*/
    .zhuce .zi a:link,
    a:visited {
      text-decoration: none;
      color: #39F;
      font-size: 12px;
    }

    .zhuce .zi a:hover {
      color: #33F;
    }

    .zou a {
      text-decoration: none;
      color: #F00;
    }

    /*直接登陆*/
    /*-----------插入图片到input------------*/
    .zhuce .shouji {
      background: url(../tu/shouji.png) no-repeat 5px center;
    }

    .zhuce .yanzengma-1 {
      background: url(../tu/xinxi.png) no-repeat 5px center;
    }

    .zhuce .mima {
      background: url(../tu/mima.png) no-repeat 5px center;
    }
  </style>
</head>

<body>
  <div class="tou"></div>
  <div class="beijing">
    <div class="zhuce_">
      <div class="zhuce">
        <div class="huiyuan">
          <span>会员注册</span>
          <div class="zou">已注册可<a href="denglu.html">直接登录</a></div>
        </div>
        <hr />

        <input type="text" placeholder="请输入电话号码" class="shouji" id="username"><br />
        <span class="box"></span><br>
        <input type="text" placeholder="请输入验证码" class="yanzengma-1">
        <input type="button" class="yanzengma-2" value="获取验证码"><br />
        <input type="password" placeholder="请输入密码" class="mima"><br />
        <input type="password" placeholder="请重新输入密码" class="mima" id="userpass" /><br />
        <div class="fu">

          <label>
            <input type="checkbox" name="danyuan" value="1" id="danyuan" />
          </label>
        </div>

        <div class="zi">
          我已阅读并接受以下条款：
          <a href="#">《唯品会服务条款》</a>
          <a href="#">《隐私条款》</a>
          <a href="#">《唯品支付用户服务协议》</a>
          <a href="#">《唯品信用服务协议》</a>
        </div>
        <br />
        <br />
        <button class="tijiao">立即注册</button><br />

      </div>
    </div>
    <footer></footer>
</body>

</html>
<script src="../js/jQuery.js"></script>
<script>
  $("footer").load("footer.html")
</script>
<script>
  // //验证用户名接口
  $("#username").blur(function () {
    $.get("../goodsAndShoppingCart/checkUser.php?username=" + $("#username").val(), function (resText) {
      console.log(resText);
      if (resText == 0) {
        $(".box").html("用户名已存在，请重新输入")
      } else if (resText == 1) {
        $(".box").html("用户名可以注册")
      }
    });
  });

  //注册成功接口


  $('.tijiao').click(function () {
    if ($('#username').val() != "" && $('#userpass').val() != "") {
      $.post('../goodsAndShoppingCart/addUser.php', { 'username': $('#username').val(), 'userpass': $('#userpass').val() }, function (data) {
        // console.log('data',data);
        if (data.trim() == 'success') {
          location.href = 'denglu.html'
        } else {
          alert("注册失败")
        }
      })
    } else {
      alert("请完整输入账户名称与密码")
    }

  })


</script>